<template>
	<!-- 电表的月度峰谷电展示 -->
	<view class="em-calendar-container">
		<view class="month-control">
			<uni-icons type="left" size="24" color="#777" @click="prevMonth"></uni-icons>
			<view class="month-text">{{ year }}&thinsp;/&thinsp;{{ month }}</view>
			<uni-icons type="right" size="24" color="#777" @click="nextMonth"></uni-icons>
			<view class="float" @click="goToToday">本月</view>
		</view>
		<view class="weekdays">
			<text v-for="day in weekdays" :key="day">{{ day }}</text>
		</view>
		<view class="days">
			<view class="day" v-for="(day, index) in daysInMonth" :key="index">
				<text :style="{ color: day.day === 0 ? 'gray' : 'black' }">{{ day.day === 0 ? ' ' : day.day }}</text>
				<view class="day-data" v-if="day.data">
					<text class="day-text" v-for="(dataItem, dataIndex) in day.data" :key="dataIndex"
						:style="{ backgroundColor: getBgColor(dataIndex) }">
						{{ dataItem }}
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import { onShow } from "@dcloudio/uni-app";
	import { getPeakValleyByMonth } from '@/services/sensor';

	// 模拟月度数据，键值为年月日
	// let monthlyData : Record<string, number[]> = {
	// 	'2025-04-01': [10.3, 20.2, 30.1],
	// 	'2025-04-05': [40.3, 50.1, 22.1],
	// 	'2025-04-06': [70.2, 80.1, 22.2],
	// 	'2025-04-07': [90.3, 100.2, 22.2],
	// 	'2025-04-08': [110.3, 120.1, 22.1],
	// 	'2025-04-10': [70.2, 80.1, 113.1],
	// };

	let monthlyData = ref({});

	async function getMonthlyData() {
		await getPeakValleyByMonth("40:4C:CA:5C:E2:E8", year.value, month.value).then(res => {
			monthlyData.value = res.data;
		})
		generateCalendar();
	}

	const now = new Date();
	const year = ref(now.getFullYear());
	const month = ref(now.getMonth() + 1);
	const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
	const daysInMonth = ref<{ day : number; data ?: number[] }[]>([]);

	/**
	 * 获取某月的天数
	 */
	const getDaysInMonth = (year : number, month : number) : number => {
		return new Date(year, month, 0).getDate();
	};

	/**
	 * 获取某月第一天是星期几
	 */
	const getFirstDayOfMonth = (year : number, month : number) : number => {
		return new Date(year, month - 1, 1).getDay();
	};

	/**
	 * 生成日历
	 */
	const generateCalendar = () => {
		const firstDay = getFirstDayOfMonth(year.value, month.value);
		const days = getDaysInMonth(year.value, month.value);
		const calendar : { day : number; data ?: number[] }[] = [];

		// 填充前面的空白
		for (let i = 0; i < firstDay; i++) {
			calendar.push({ day: 0 });
		}

		// 填充日期和数据
		for (let day = 1; day <= days; day++) {
			const dateKey = `${year.value}-${month.value.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
			const data = monthlyData.value[dateKey];
			calendar.push({ day, data });
		}
		daysInMonth.value = calendar;
	};

	/**
	 * 上一月,点击事件函数
	 */
	function prevMonth() {
		if (month.value === 1) {
			year.value--;
			month.value = 12;
		} else {
			month.value--;
		}
		generateCalendar();
	};

	/**
	 * 下一月,点击事件函数
	 */
	function nextMonth() {
		if (month.value === 12) {
			year.value++;
			month.value = 1;
		} else {
			month.value++;
		}
		generateCalendar();
	};

	/**
	 * 获取背景颜色
	 */
	function getBgColor(index : number) {
		const colors = ['#e5ffe5', '#ffe5e5', '#88dd88'];
		return colors[index % colors.length];
	};

	/**
	 * 回到本月
	 */
	const goToToday = () => {
		const currentDate = new Date();
		year.value = currentDate.getFullYear();
		month.value = currentDate.getMonth() + 1;
		generateCalendar();
	};

	onShow(() => {
		getMonthlyData();
	})
</script>

<style scoped lang="scss">
	.em-calendar-container {
		margin: 10rpx 10rpx; // 外边距 上下/左右
		background-color: #fffef0; // 背景颜色
		border-radius: 20rpx; // 添加圆角
		box-shadow: 0rpx 0rpx 10rpx #ccc; // 添加阴影

		.month-control {
			display: flex; // 选择月份的按钮
			justify-content: center;
			align-items: center;
			margin: 10rpx 0rpx;

			.month-text {
				text-align: center;
				font-size: 28rpx;
				padding: 0rpx 40rpx;
				color: #333;
			}

			.float {
				width: 100rpx;
				height: 50rpx;
				position: fixed;
				right: 20rpx;
				display: flex; // 使用flex布局
				justify-content: center; // 水平居中
				align-items: center; // 垂直居中
				color: #333;
				font-size: 28rpx;
				background-color: #eee;
				border-radius: 50rpx; // 添加圆角
			}
		}

		.weekdays {
			display: flex;
			justify-content: space-around; // 使每个文本均匀分布
			font-size: 28rpx; // 日历上星期的字体大小
			border-top: 1rpx solid#ddd;
			padding: 20rpx 0rpx;
			color: #000;
		}

		.days {
			display: grid;
			grid-template-columns: repeat(7, 1fr); // 使每个单元格均分
			gap: 10rpx;

			.day {
				border-top: 1rpx solid#eee;
				padding: 20rpx 10rpx 0rpx 0rpx; // 内边距 上下左右
				text-align: center;
				font-size: 26rpx; // 日历的字体大小

				.day-data {

					.day-text {
						font-size: 26rpx; // 数据的字体大小
						display: block; // 换行显示
						margin-top: 10rpx; // 添加上外边距
						border-radius: 10rpx; // 添加圆角
						color: #222;
					}
				}
			}
		}
	}
</style>